<template>
    <div class="p-2 ">
      <ul>
        <li v-for="(user,index) in users" :key="user.id" class="noDrag">
    
            <div class=" 
            hover:bg-gray-100
            my-2
            border-2
            hover: cursor-pointer
            p-2 max-w-sm  bg-white rounded-xl shadow-lg flex items-center space-x-4"
            :class="'userinfo' + index"
            @dragover.prevent="handleDragOver(index)"
            @dragleave.prevent="handleDragLeave(index)"
            @drop.prevent="handleDrop"
            >
            <div class="flex-none w-5/6">
                <strong>IP：192.168.1.3</strong>
                <div>
                <span class="text-gray-600 text-sm">用户名：{{user.name}}</span>
                </div>
            </div>
            <div :class="'userinfo-icon' + index">

            <UploadThree   theme="outline" size="24" fill="#333"/>
                

            </div>
            </div>
            
        </li>
      </ul>
    </div>
  </template>
  
  <script>
    import { UploadThree } from '@icon-park/vue-next';
  export default {
    props: {
      users: Array,
    },
    components: {
        UploadThree
    },
    data() {
      return {
        file: null,
        Switch: false
      };
    },
    methods: {
    handleDragOver(className) {
      // 拖拽文件时的样式处理
      console.log('拖拽文件时的样式处理' + this.Switch)
      // 通过 className 参数可以获取到当前拖拽的元素
      let element = document.getElementsByClassName('userinfo-icon' + className)[0];
      // 给他添加一个类名
        element.classList.add('animate-bounce');
        let element2 = document.getElementsByClassName('userinfo' + className)[0];
        element2.classList.add('border-emerald-400');
    },
    handleDragLeave(className) {
        // 拖拽文件离开时的样式处理
        console.log('拖拽文件离开时的样式处理' + this.Switch)
        // 通过 className 参数可以获取到当前拖拽的元素
        let element = document.getElementsByClassName('userinfo-icon' + className)[0];
        // 给他移除一个类名
        element.classList.remove('animate-bounce');
        let element2 = document.getElementsByClassName('userinfo' + className)[0];
        element2.classList.remove('border-emerald-400');
    },
    handleDrop(event) {
        // 获得当前标签中的user对象
        console.log(event)
        let className = event.target.className;
        let index = className.substring(className.length - 1, className.length);
        console.log(index)
        let user = this.users[index];
        console.log(user)
      // 拖拽文件释放时的处理
      const droppedFiles = event.dataTransfer.files;
        console.log(droppedFiles)
      if (droppedFiles.length > 0) {
        this.file = droppedFiles[0];
      }

      // 可以在这里添加一些视觉效果，比如高亮边框
    },
    clearFile() {
      // 清除选择的文件
      this.file = null;
    },
    },
  };
  </script>

<style>

</style>
  